<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    ul{
        /*去掉没个li前面点  */
        list-style: none;
    }
    li{
        float: left;/*浮动：居左 li不换行，紧跟在后面*/
        margin-right: 9px;/*外右侧*/
        background-color: #ee1100;/*背景色 #红绿蓝*/
        padding: 5px 10px 5px 10px;/*内部四周留白*/
        border-radius: 5px;
    }
    li:hover{/*鼠标移入*/
        background-color: aqua;/*背景色*/
    }
    a{
        text-decoration:none;/*取消超链接下划线*/
        color: white;/*字体颜色：白色*/
    }
    </style>
</head>
<body>
    <h3>使用ul和li标签来实现，通过样式修饰来实现</h3>
    <h5>a标签实现超链接</h5>
    <ul>
        <!--_lank 不是覆盖 _self覆盖自身 -->
        <li><a href="https://www.w3school.com.cn/" target="_blank">W3CSchool</li>
        <li><a href="https://www.runoob.com/" target="_blank">菜鸟教程</li>
        <li><a href="https://www.csdn.net/" target="_blank">CSDN</li>
        <li><a href="https://segmentfault.com/" target="_blank">思否</li>
        <li><a href="https://act.codeboy.com/" target="_blank">java培优</li>
    </ul>
</body>
</html>